import React, { useState } from "react";
import { Form, Input, Button, Dialog } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import './Register.css'
import { useNavigate } from "react-router-dom";

function Register() {
    const navigate =useNavigate()
  const [value, setValue] = useState("");
  const [visible, setVisible] = useState(false);
  const onFinish = (values: any) => {
    navigate('/login')
  };
  return (
    <div>
      <h2>注册账号</h2>
      <Form
      onFinish={onFinish}
        layout="horizontal"
        footer={
          <Button
            style={{ background: "#ff8142", border: "none" }}
            block
            type="submit"
            color="primary"
            size="large"
          >
            注册
          </Button>
        }
      >
        <Form.Item
          name="name"
          rules={[{ required: true, message: "用户名不能为空" }]}
        >
          <Input onChange={console.log} placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          name="emio"
          rules={[
            { required: true, message: "邮箱不能为空" },
            { type: "email", message: "邮箱格式有误" },
          ]}
        >
          <Input onChange={console.log} placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item
          name="pssword"
          rules={[
            { required: true, message: "密码不能为空" },
          ]}
        >
        <div className="password">
          <Input
            className="input"
            placeholder="请输入密码"
            type={visible ? "text" : "password"}
          />
          <div className="eye">
            {!visible ? (
              <EyeInvisibleOutline onClick={() => setVisible(true)} />
            ) : (
              <EyeOutline onClick={() => setVisible(false)} />
            )}
          </div>
        </div>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Register;
